import React, { useEffect, useState } from 'react';
import {
  Button,
  Table,
  Space,
  Select,
  DatePicker,
  Form,
  Pagination,
  Spin,
} from 'antd';
import { Link } from 'react-router-dom';
import request from '../../../http';
import { history } from 'umi';
import './index.css';

const { Option } = Select;

const Check = () => {
  const columns = [
    {
      title: '日期',
      dataIndex: '日期',
      key: '日期',
    },
    {
      title: '学号',
      dataIndex: '学号',
      key: '学号',
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '项目名称',
      dataIndex: '项目名称',
      key: '项目名称',
    },
    {
      title: '实训老师',
      dataIndex: '实训老师',
      key: '实训老师',
    },
    {
      title: '责任老师',
      dataIndex: '责任老师',
      key: '责任老师',
    },
    {
      title: '考勤情况',
      key: '考勤情况',
      render: (record) => {
        if (record.attendance1 == '正常') {
          return <span>正常</span>;
        } else if (record.attendance1 == '迟到') {
          return <span>迟到</span>;
        } else if (record.attendance1 == '早退') {
          return <span>早退</span>;
        } else if (record.attendance1 == '缺勤') {
          return <span>缺勤</span>;
        } else {
          return <span>请假</span>;
        }
      },
    },
    {
      title: '应签到',
      dataIndex: '应签到',
      key: '应签到',
    },
    {
      title: '实签到',
      dataIndex: '实签到',
      key: '实签到',
    },
    {
      title: '应签退',
      dataIndex: '应签退',
      key: '应签退',
    },
    {
      title: '实签退',
      dataIndex: '实签退',
      key: '实签退',
    },
    {
      title: '操作',
      key: '操作',
      render: (record) => {
        if (
          record.attendance == 1 ||
          record.attendance == 2 ||
          record.attendance == 3 ||
          record.attendance == 4
        ) {
          return <div>请假申请</div>;
        } else {
          return <a onClick={viewDetails}>查看详情</a>;
        }
      },
    },
  ];
  //定义表格数据
  const [data, setdata] = useState([{}]);
  //判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  //获取下拉框的值
  const [date, setdate] = useState(0);
  const [groupId, setgroupId] = useState(0);
  const [attendece, setattendece] = useState(0);
  //接受下拉框请求的变量
  const [courseName, setcourseName] = useState([]);
  const [attendenceInformation, setattendenceInformation] = useState([]);
  //加载
  const [loading, setloading] = useState(0);

  //全局搜索
  useEffect(() => {
    //学生请假
    request
      .post('/att/student/queryAttendanceRecord', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        console.log('学生考勤记录请求成功', res);
        setloading(1);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.applyDateTime,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            项目名称: dataObj.courseName,
            实训老师: dataObj.trainingTeachers,
            责任老师: dataObj.responsibility,
            考勤情况: dataObj.attendance,
            应签到: dataObj.sign,
            实签到: dataObj.Signed,
            应签退: dataObj.outSign,
            实签退: dataObj.outSigned,
            attendance1: dataObj.attendance,
            studentId1: dataObj.studentId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      });

    //项目名称请求
    request.post('/common/a_t_s/queryCourseNames').then((res) => {
      // console.log("attendence-项目名称请求成功", res.data)
      const newPArray = res.data;
      setcourseName((courseName) => (courseName = newPArray));
    });

    //考勤情况请求
    request
      .post('/common/a_t_s/enumAttendance', {
        isGraduated: 0,
      })
      .then((res) => {
        // console.log("考勤情况请求成功", res.data)
        const newGArray = res.data;
        setattendenceInformation(
          (attendenceInformation) => (attendenceInformation = newGArray),
        );
      });
  }, []);

  //分页搜索
  const pageChange = (page, pageSize) => {
    if (pagination == 'false') {
      // console.log("搜索之前分页")
      request
        .post('/att/student/queryAttendanceRecord', {
          number: pageSize,
          page: page,
        })
        .then((res) => {
          // console.log("学生请假记录请求成功", res)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.applyDateTime,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              项目名称: dataObj.courseName,
              实训老师: dataObj.trainingTeachers,
              责任老师: dataObj.responsibility,
              考勤情况: dataObj.attendance,
              应签到: dataObj.sign,
              实签到: dataObj.Signed,
              应签退: dataObj.outSign,
              实签退: dataObj.outSigned,
              attendance1: dataObj.attendance,
              studentId1: dataObj.studentId,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        });
    } else if (pagination1 == 'true') {
      request
        .post('/att/student/queryAttendanceRecord', {
          number: 10,
          page: 1,
        })
        .then((res) => {
          // console.log("学生请假记录请求成功", res)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.applyDateTime,
              学号: dataObj.studentId,
              姓名: dataObj.studentName,
              项目名称: dataObj.courseName,
              实训老师: dataObj.trainingTeachers,
              责任老师: dataObj.responsibility,
              考勤情况: dataObj.attendance,
              应签到: dataObj.sign,
              实签到: dataObj.Signed,
              应签退: dataObj.outSign,
              实签退: dataObj.outSigned,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        })
        .catch(() => {
          // alert("该查询没有数据!")
          setdata('');
        });
    }
  };

  //查询搜索
  const onBtn = () => {
    console.log(date, groupId, attendece);
    request
      .post('/att/student/queryAttendanceRecord', {
        number: 10,
        page: 1,
        applyDateTime: date || '',
        courseId: groupId || '',
        attendance: attendece || '',
      })
      .then((res) => {
        console.log('学生请假记录请求成功', res);
        const datas = res.data.returnDate;
        const newDatas = datas.map((dataObj) => {
          return {
            日期: dataObj.applyDateTime,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            项目名称: dataObj.courseName,
            实训老师: dataObj.trainingTeachers,
            责任老师: dataObj.responsibility,
            考勤情况: dataObj.attendance,
            应签到: dataObj.sign,
            实签到: dataObj.Signed,
            应签退: dataObj.outSign,
            实签退: dataObj.outSigned,
            attendance1: dataObj.attendance,
            studentId1: dataObj.studentId,
          };
        });
        setdata(newDatas);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('true');
        setpagination1('true');
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //重置搜索
  const onReset = () => {
    history.go(0);
    //学生请假
    request
      .post('/att/student/queryAttendanceRecord', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("学生请假记录请求成功", res)
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.applyDateTime,
            学号: dataObj.studentId,
            姓名: dataObj.studentName,
            项目名称: dataObj.courseName,
            实训老师: dataObj.trainingTeachers,
            责任老师: dataObj.responsibility,
            考勤情况: dataObj.attendance,
            应签到: dataObj.sign,
            实签到: dataObj.Signed,
            应签退: dataObj.outSign,
            实签退: dataObj.outSigned,
            attendance1: dataObj.attendance,
            studentId1: dataObj.studentId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('false');
      });
  };

  //查看详情
  const viewDetails = () => {
    history.push({
      pathname: '/student/absence/LeaveInformation/index',
    });
  };

  //获取选择日期
  const DateChange = (date, dateString) => {
    setdate(dateString);
  };

  return (
    <div>
      <div className="tabBar">
        <Button type="primary" style={{ padding: '5px 50px' }}>
          项目考勤记录
        </Button>
        <Link to="./group/group">
          <Button style={{ padding: '5px 50px' }}>打卡记录</Button>
        </Link>
      </div>
      <Form>
        <div className="prjName">
          日期: &nbsp;&nbsp;
          <Space direction="vertical" size={12}>
            <DatePicker onChange={DateChange} placeholder="请输入日期" />
          </Space>
        </div>
        <div className="groupName" style={{ marginLeft: 340 }}>
          项目名称:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            className="Select"
            onChange={(e, index) => {
              // setproValue(index.value)
              setgroupId(parseInt(index.key));
            }}
          >
            {courseName.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.format}>
                  {cNameObj.format}
                </Option>
              );
            })}
          </Select>
        </div>
        <div className="groupName" style={{ marginLeft: 640 }}>
          考勤情况:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            className="Select"
            onChange={(e, index) => {
              // setproValue(index.value)
              setattendece(parseInt(index.key));
            }}
          >
            {attendenceInformation.map((proObj) => (
              <Option key={proObj.id} value={proObj.format}>
                {proObj.format}
              </Option>
            ))}
          </Select>
          <div className="btn">
            <Button
              type="primary"
              style={{ padding: '5px 20px' }}
              onClick={onBtn}
            >
              查询
            </Button>
            <Button style={{ padding: '5px 20px' }} onClick={onReset}>
              重置
            </Button>
          </div>
        </div>
      </Form>
      <div className="form">
        {loading == 0 ? (
          <div className="example">
            <Spin size="large" />
          </div>
        ) : (
          <div>
            <Table columns={columns} dataSource={data} pagination={false} />
            <div>
              <Pagination
                total={sum}
                onChange={pageChange}
                hideOnSinglePage={true}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Check;
